<template>
  <a-layout>
    <a-layout>
      <a-layout-sider width="220" class="bg-white">
        <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline" class="h-full border-r">
          <a-sub-menu key="sub1">
            <template #title>
              <span class="flex items-center">
                <ReadOutlined class="mr-2" />
                行业动态
              </span>
            </template>
            <a-menu-item key="1">
              <router-link to="/ID">新闻咨询</router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>

      <a-layout class="p-6">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item>
            <home-outlined />
            <span>当前位置:&nbsp;&nbsp;</span>
            <router-link to="home">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <router-link to="ID">行业动态</router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>

        <a-layout-content :style="{ background: '#fff', padding: '20px', margin: '10px', minHeight: '700px' }">
          <!-- 使用新组件 -->
          <dynamics-list/>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
  <FooterComponent></FooterComponent>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import FooterComponent from "./Footer.vue";
import { HomeOutlined, ReadOutlined } from '@ant-design/icons-vue';
import DynamicsList from "./DataTable/dynamicsList.vue";

const selectedKeys2 = ref(["1"]);
const openKeys = ref(["sub1"]);

onMounted(() => {
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<style scoped>
.footer p {
  font-size: 14px;
}

.footer a {
  color: white;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}
</style>
